<template>
  <el-dialog
    class="save-or-update-device"
    :visible="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="title"
    width="574px"
  >
    <el-form ref="form" :model="formData" label-width="120px" label-suffix="：" :rules="rules">
      <el-form-item prop="name" label="分组名称">
        <el-input v-model="formData.name" clearable />
      </el-form-item>
      <el-form-item v-if="value.id" prop="deviceNums" label="组内设备数">
        {{ value.deviceNums || 0 }}
        <!-- <el-button type="text" style="color: #0084EE;" @click="handleNav">前往管理</el-button> -->
      </el-form-item>
      <el-form-item label="备注说明" prop="remark">
        <el-input v-model="formData.remark" clearable />
      </el-form-item>
    </el-form>
    <span slot="footer" class="justify-center">
      <el-button v-loading="loading" type="primary" @click="handleSubmit">提交</el-button>
      <el-button @click="handleClose">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { apiAddGroup, apiUpdateGroup } from '@/views/device/group/api'

export default {
  name: 'CreateOrUpdate',
  props: {
    title: { type: String, required: true, default: '新建设备' },
    visible: { type: Boolean, required: true, default: false },
    value: { type: Object, default: () => ({ id: null }) },
  },
  data() {
    return {
      loading: false,
      formData: {},
    }
  },
  computed: {
    rules() {
      return {
        name: { required: true, message: '分组名称不能为空', trigger: 'blur' },
      }
    },
  },
  watch: {
    value: {
      immediate: true,
      handler() {
        if (this.value.id) {
          this.formData = { ...this.value }
        }
      },
    },
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate(validate => {
        if (validate) {
          if (this.value.id) {
            this.updateGroup()
          } else {
            this.addGroup()
          }
        }
      })
    },
    handleClose() {
      if (this.value.id) {
        this.$refs.form.clearValidate()
        this.formData = { ...this.value }
      }
      this.loading = false
      this.$refs.form.clearValidate()
      this.$emit('update:visible', false)
    },
    handleNav() {
      // 前往管理
      this.$emit('manage-device')
    },
    async addGroup() {
      this.loading = true
      try {
        const data = await apiAddGroup(this.formData)
        this.handleClose()
        this.$emit('change', data)
        this.$message.success('添加成功')
      } catch (e) {
        this.$message.error(e)
      }
      this.loading = false
    },
    async updateGroup() {
      this.loading = true
      try {
        const data = await apiUpdateGroup(this.formData)
        this.handleClose()
        this.$emit('change', data)
        this.$message.success('更新成功')
      } catch (e) {
        this.$message.error(e)
      }
      this.loading = false
    },
  },
}
</script>

<style scoped></style>
